<template >
    <div class="workcounttable">
        <!-- 封装的日历，渲染表格，查看考勤 -->
        <div class="top">
            <div class="block">
                考勤日期：
                <el-date-picker v-model="value1" type="day" placeholder="选择日期" :size="size" />
            </div>
            <div class="topright">
                <el-button class="btn-seal">
                    <el-icon>
                        <FolderAdd />
                    </el-icon> &nbsp;&nbsp;导出
                </el-button>
            </div>
        </div>
        <div class="bottom">
            <!-- stripe :row-style="{background:'#F7F7F7'}" -->
            <el-table :data="tableData" border style="width: 100%" height="500" highlight-current-row="true" stripe
                :row-style="{ backgroundColor: '#FFFFFF' }"
                :header-cell-style="{ background: '#1EC695', color: '#ffffff' }">
                <el-table-column fixed prop="date" label="年级" width="150" align="center" />
                <el-table-column prop="tonum" label="应到人数" width="180" align="center" />
                <el-table-column prop="factnum" label="实到人数" width="180" align="center" />
                <el-table-column prop="late" label="迟到" width="180" align="center" />
                <el-table-column prop="absence" label="缺勤" width="180" align="center" />
                <el-table-column prop="attendance" label="出勤率" width="180" align="center" />
            </el-table>
            <!-- <div class="bottom2">
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[10, 20, 30, 40]" :disabled="disabled" :background="background"
                        layout="  prev, pager, next,total,jumper,sizes," :total="50" prev-text="上一页" next-text="下一页" />
                </div>
            </div> -->
        </div>

    </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
// let tableRowClassName = ref()

const tableData = [
    {
        id: 1,
        date: '一年级',
        tonum: 3,
        factnum: 3,
        late: 0,
        absence: 0,
        attendance: '100%',
    },
    {
        id: 2,
        date: '二年级',
        tonum: 3,
        factnum: 3,
        late: 0,
        absence: 0,
        attendance: '100%',
    },
    {
        id: 3,
        date: '三年级',
        tonum: 3,
        factnum: 3,
        late: 0,
        absence: 0,
        attendance: '100%',
    },
    {
        id: 4,
        date: '四年级',
        tonum: 3,
        factnum: 3,
        late: 0,
        absence: 0,
        attendance: '100%',
    },
]
</script>
  
<style scoped>
/* .success-row {
  background-color:#eaf3fb !important; 
} */
/* .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
    td {
        background-color: rgb(247, 247, 247); 隔行变色
    } */
/* 强制修改样式 */
/deep/ .el-pager li.is-active {
    background-color: #1EC695;
    color: white;
}

.bottom2 {
    float: right;
}

.el-input__wrapper {
    float: right;
}

.topright {
    float: right;
}

.btn-seal {
    color: white;
    background-color: rgb(23, 144, 255);
}

.workcounttable {
    padding: 30px;
    background-color: rgb(247, 247, 247);
}

.top {
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding: 20px 40px;
}

.bottom {
    background-color: white;
    padding: 10px 40px;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>